<template>
	<view>
		<scroll-view scroll-y class="scrollbox" @scrolltolower="loadMore">
			<view class="pro_top">
				<view class="top_name"></view>
				<view class="top_beizhu" @click="toShaixuan">
					<image :src="BASE_IMG_URL+'/index/green-shaixuan.png'" class="beizhuimg" ></image>
					筛选
				</view>
			</view>
			<view class="jour_warp">
				<view class="work_li" v-for="(item,index) in list" :key="index" @click="jumpDetail(item)">
					<view class="li_key" v-if="item.is_read != 1"></view>
					<view class="li_left">
						<image :src="item.staff.img ? item.staff.img : BASE_IMG_URL+'img/headImg.png'" class="li_img" mode=""></image>
						<view class="">
							<view class="li_name">{{item.staff.name}} <text style="font-size:24rpx;color:#999;margin-left:15rpx">{{item.staff.post?item.staff.post:''}}</text> </view>
							<view class="li_post">{{item.createtime}}</view>
						</view>
					</view>
					<view class="li_right">
						<view class="tatus firbg" v-if="item.type == '日报'">日报</view>
						<view class="tatus secbg" v-if="item.type == '周报'">周报</view>
						<view class="tatus thrbg" v-if="item.type == '月报'">月报</view>
						<view class="tatus forbg" v-if="item.type == '季报'">季报</view>
						<view class="tatus fivbg" v-if="item.type == '年报'">年报</view>
					</view>
				</view>
				<view class="noData" v-if="list.length == 0">暂无更多</view>
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	import { netStaffWorkreport } from '@/api/user.js'
	import { netWorkreportList } from '@/api/api.js'
	import { BASE_IMG_URL } from '@/api/http.js'
	
	export default{
		
		data() {
			return{
				BASE_IMG_URL:BASE_IMG_URL,
				showScreen:false,
				staffid:'',
				list:[],
				pages:1,
				totalPage:1,
				queryObj:{}
			}
		},
		methods:{
			init(id) {
				this.staffid = id
				this.initList()
			},
			jumpDetail(item) {
				uni.navigateTo({
					url:'/pagesB/workreport/workDetail?id='+item.id
				})
			},
			loadMore(){
				if(this.page < this.totalPage){
					this.page ++
					this.getList()
				}
			},
			getList() {
				let params = {
					page:this.page,
					staff_id:this.staffid,
					...this.queryObj
				}
				netWorkreportList(params).then(res=>{
					this.list = this.list.concat(res.data.data)
					this.totalPage = res.data.last_page
				})
			},
			initList() {
				this.list = []
				this.page = 1
				this.getList()
			},
			toShaixuan() {
				this.$emit('shaixuan')
			},
			sureQuery(params) {
				this.queryObj = params
				this.initList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pro_top{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background:#fff;
		padding:0 24rpx 24rpx;
		box-shadow: 1rpx 1rpx 8rpx 2rpx rgba(0,0,0,0.1);
		.top_name{
			font-size:26rpx;
			color:#333;
		}
		.top_beizhu{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			font-size:24rpx;
			color:#666;
			.beizhuimg{
				width:35rpx;
				height:27rpx;
				margin-right:10rpx;
			}
		}
	}
	.scrollbox{
		width:100%;
		height:calc(100vh - 100rpx);
	}
	.firbg{
		background:#AF99FE;
	}
	.secbg{
		background:#FBB545;
	}
	.thrbg{
		background:#4AD49D;
	}
	.forbg{
		background:#FF6E7F;
	}
	.fivbg{
		background:#54B1F7;
	}
	.work_li{
		width:702rpx;
		background:#fff;
		border-radius: 10rpx;
		padding:30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin:24rpx auto 0rpx;
		position: relative;
		box-shadow:1rpx 1rpx 8rpx 2rpx rgba(0, 0, 0, 0.1);
		.li_key{
			position: absolute;
			right:5rpx;
			top:5rpx;
			width:20rpx;
			height:20rpx;
			border-radius: 50%;
			background:red;
		}
		.li_left{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size:26rpx;
			color:#333;
			.li_img{
				width:80rpx;
				height:80rpx;
				border-radius: 50%;
				margin-right:15rpx;
			}
			.li_name{
				font-size:26rpx;
				color:#333;
				margin-bottom:15rpx;
			}
		}
		.li_right{
			.tatus{
				font-size:24rpx;
				color:#fff;
				width:110rpx;
				height:55rpx;
				border-radius: 10rpx;
				text-align: center;
				line-height: 55rpx;
			}
		}
	}
</style>
